﻿<template>
    <el-input v-model="displayValue" :disabled="disabled" v-bind="$attrs" clearable @clear="onClear">
        <template #append v-if="!disabled">
            <el-button @click="onBtnClick" icon="el-icon-location"></el-button>
        </template>
    </el-input>
    <MyMapDlg ref="dlg" @selected="onSelected"></MyMapDlg>
</template>

<script>
    import MyMapDlg from './MyMapDlg.vue'
    import Utils from './Utils.js'

    export default {
        name: "MyAddressInput",
        emits: ["update:modelValue"],
        components: {
            MyMapDlg
        },
        props: {
            modelValue: [Number, String],
            srcfields: String,
            destfields: String,
            disabled: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                displayValue: ""
            }
        },
        created() {
            this.displayValue = this.modelValue;
        },
        methods: {
            
            onSelected(item) {
                if (item) {
                    var model = Utils.getFormData(this);
                    if (!model) return;

                    let src = (this.srcfields || "").split(";");
                    let dst = (this.destfields || "").split(";");

                    item.addr = item.City ? `${item.City}/${item.District}/${item.Town}/${item.Street}` : "";

                    let newItem = {};
                    for (let ix = 0; ix < src.length; ix++) {
                        model[dst[ix]] = item[src[ix]];
                    }
                }
            },
            onBtnClick() {
                this.$refs.dlg.open(this.$store.city, null, this.modelValue);
            },
            onClear() {
                this.onSelected({});
            },
        },
       
        watch:{
            displayValue(newValue){
                if(newValue!=this.modelValue){
                    this.$emit("update:modelValue", newValue);
                }
            },
            modelValue(newValue){
                if(newValue!=this.displayValue){
                    this.displayValue = newValue;
                }
            }
        }
    }

</script>